<script setup lang="ts">
import { onMounted, onUnmounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import Search from './Search.vue'

const navlistShow = ref(false)
const router = useRouter()
const search = ref(false)

const openMenu = () => {
    navlistShow.value = true
}

const closeMenu = () => {
    navlistShow.value = false
}

const routerPush = (to: string) => {
    navlistShow.value = false
    router.push(to)
}

const top = ref(0)

onMounted(() => {
    window.addEventListener('scroll', function () {
        top.value = window.scrollY
        search.value = false
    })
})

onUnmounted(() => {
    window.removeEventListener('scroll', function () { })
})

const toSearch = () => {
    search.value = true
}


</script>

<template>
    <Search v-model:isSearch="search"></Search>
    <div class="navcontainer _navcontainer" :class="{ fixed: top > 80 }">
        <div class="navicon _navicon">
            <i class="iconfont icon-caidan" @click="openMenu"></i>
        </div>
        <div class="appleicon _appleicon">
            <i class="iconfont icon-pingguo" @click="$router.push('/')"></i>
        </div>
        <div id="navID" class="mainnavlist _mainnavlist" :class="{ navlistshow: navlistShow }">
            <div class="navlistclose">
                <i class="iconfont icon-guanbi" @click="closeMenu"></i>
            </div>
            <div @click="routerPush('/mac')">Mac</div>
            <div @click="routerPush('/ipad')">iPad</div>
            <div @click="routerPush('/iphone')">iPhone</div>
            <div @click="routerPush('/watch')">Watch</div>
            <div @click="routerPush('/music')">Music</div>
            <div @click="routerPush('/support')">技术支持</div>
            <div>
                <i class="iconfont icon-sousuo1" @click="toSearch"></i>
            </div>
        </div>
        <div class="shopcar">
            <i class="iconfont icon-gouwuche"></i>
        </div>
    </div>
</template>

<style scoped lang="less">
.shopcar,
.appleicon {
    width: 100px;
    cursor: pointer;
}

.shopcar:hover,
.appleicon:hover,
._navicon:hover {
    color: white;
}

div.fixed {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10000;
}


// 大于等于800px
@media only screen and (min-width: 800px) {
    .navcontainer {
        top: -100%;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 64px;
        background-color: rgb(51, 51, 51);
        color: rgb(214, 214, 214);
        transition: all .6s;

        .navicon {
            display: none;
        }

        .mainnavlist {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 64px;

            .navlistclose {
                display: none;
            }

            div {
                text-align: center;
                height: 64px;
                line-height: 64px;
                width: 95px;
                cursor: pointer;
                font-size: 16px;
                font-weight: 500;
            }

            div:hover {
                color: white;
            }
        }


    }
}

// 小于800px
@media only screen and (max-width: 799px) {
    ._navcontainer {
        display: flex;
        align-items: center;
        flex-shrink: 0;
        justify-content: space-around;
        height: 50px;
        background-color: rgb(51, 51, 51);
        color: rgb(214, 214, 214);
        position: relative;
        text-align: center;
        transition: all .6s;

        ._navicon {
            width: 100px;
            cursor: pointer;
        }

        ._mainnavlist {
            display: flex;
            flex-direction: column;
            //屏幕宽度小于800，默认清空下菜单是关闭的
            position: fixed;
            align-items: center;
            left: 0;
            top: -100%;
            width: 100%;
            height: 100%;
            color: rgb(214, 214, 214);
            background-color: rgba(0, 0, 0, 0.95);
            padding-top: 50px;
            row-gap: 10px;
            transition: all .8s;
            z-index: -1;

            div:not(:first-child) {
                text-align: center;
                height: 64px;
                line-height: 64px;
                width: 100%;
                cursor: pointer;
            }

            div:hover {
                color: #ffff;
            }
        }

        .navlistclose {
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-color: rgba(255, 255, 255, 0.2);
            cursor: pointer;
        }
    }

    .navlistshow {
        top: 0 !important;
        z-index: 1999 !important;
    }
}
</style>
